<template>
  <div>
    <div>
      <label for="orderNo">订单号：</label>
      <input id="orderNo" v-model="orderNumber" />
      <button @click="serachOrderNo">查询</button>
    </div>
    <div class="logistics-info" v-show="flag">
      <ProductsList>
        <template #products="{ goodNo, goodName, type, desc }">
          <h2>商品相关信息</h2>
          <div>
            <div>
              商品id: <strong>{{ goodNo }}</strong>
            </div>
            <div>
              商品名称: <strong>{{ goodName }}</strong>
            </div>
            <div v-if="type === 0">
              商品描述: <slot name="desc">这是一本好书</slot>
            </div>
            <div class="despic" v-else-if="type === 1">
              商品描述: <img :src="desc" alt="" />
            </div>
          </div>
        </template>
      </ProductsList>

      <LogisticsList :orderInfo="orderInfo" :logisticsInfo="logisticsInfo">
      </LogisticsList>
    </div>
  </div>
</template>

<script>
import ProductsList from '@/components/ProductsList.vue'
import LogisticsList from '@/components/LogisticsList.vue'
export default {
  components: {
    ProductsList,
    LogisticsList,
  },
  data() {
    return {
      flag: false,
      orderNumber: '',
      orderInfo: {
        orderNo: '12345678912312',
        role: 'admin', // 角色 ==> 用于判断是否有查看用户详情的权限
        logisticsStatus: 2, // 0 未发货 1 已发货 2 已签收 3 未签收
        logisticsCompany: '顺丰速运', // 快递公司的名称
        logisticsNo: 'SF123456789', // 快件运单号
      },
      logisticsInfo: [
        {
          time: '2023-02-01 10:00:00', // 时间
          content: '快件已发货', // 快递状态
        },
        {
          time: '2023-02-02 09:00:00',
          content: '快件到达深圳中心',
        },
        {
          time: '2023-02-03 08:00:00',
          content: '快件派送中',
        },
        {
          time: '2023-02-04 16:00:00',
          content: '已签收',
        },
      ],
    }
  },
  methods: {
    serachOrderNo() {
      setTimeout(() => {
        if (this.orderInfo.orderNo.includes(this.orderNumber)) {
          this.flag = true
          this.orderNumber = ''
        } else {
          this.flag = false
          alert('请输入正确的订单号')
          this.orderNumber = ''
        }
      }, 500)
    },
  },
}
</script>
<style>
.logistics-info {
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0px 0px 10px #eee;
  padding: 10px;
  font-size: 14px;
}

.logistics-info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.logistics-info-header-left {
  display: flex;
  align-items: center;
}

.logistics-status {
  font-weight: bold;
  font-size: 16px;
}
.blue {
  color: blue;
}
.hotpink {
  color: hotpink;
}
.lightgreen {
  color: lightgreen;
}
.greenyellow {
  color: greenyellow;
}

.logistics-company,
.logistics-no {
  margin-left: 10px;
  font-size: 14px;
  color: #333;
}

.logistics-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 230px;
  overflow-y: auto;
}

.logistics-info-list li {
  display: flex;
  margin-bottom: 10px;
}

.logistics-info-list-time {
  font-size: 12px;
  color: #999;
  width: 80px;
  text-align: right;
  margin-right: 10px;
}

.logistics-info-list-content {
  font-size: 14px;
  color: #333;
}
.despic img {
  width: 200px;
  height: auto;
}
</style>
